<template>
    <div class="evaluate-box">
        <div class="product flex-a">
            <div><img src="https://cxj.szzkba.cn/upload/i/2024/07/23/141815.png" alt=""></div>
            <div>
                <div class="title">上门维修水龙头</div>
                <div class="price">￥99</div>
            </div>
        </div>
        <div class="product">
            <div class="common flex-a flex-b">
                <div>上门速度</div>
                <div>
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                </div>
            </div>
            <div class="common flex-a flex-b">
                <div>服务态度</div>
                <div>
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                    <StarN color="#999999" size="20" />
                </div>
            </div>
            <div class="common flex-a flex-b">
                <div>服务质量</div>
                <div>
                    <StarFillN color="#FE6F49" size="20" />
                    <StarFillN color="#FE6F49" size="20" />
                    <StarFillN color="#FE6F49" size="20" />
                    <StarFillN color="#FE6F49" size="20" />
                    <StarN color="#999999" size="20" />
                </div>
            </div>
            <nut-textarea v-model="val" rows="20" placeholder="其他想说的..." />
        </div>
        <nut-button color="#21C38F" block>确认</nut-button>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useReachBottom } from '@tarojs/taro';
import { StarN, StarFillN } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { } from '../../../../api/index'
export default {
    components: {
        StarN,
        StarFillN
    },
    setup() {
        const data = reactive({
            val: ''
        });

        onMounted(() => {
            const router = useRouter();
            Taro.getStorage({
                key: 'user',
                success: function (res) {

                }
            })
        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        useReachBottom(() => {

        })
        return {
            ...toRefs(data), jumpTo
        }
    }
};
</script>
<style lang="scss">
.evaluate-box {
    padding-top: 20rpx;

    .product {
        border-radius: 20rpx;
        background: #fff;
        padding: 20rpx;
        box-sizing: border-box;
        width: 94%;
        margin: 0 auto 20rpx;

        img {
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }

        .title {
            font-size: 30rpx;
        }

        .price {
            margin-top: 60rpx;
            font-size: 28rpx;
            color: #F22F5C;
        }

        .common {
            margin-bottom: 30rpx;

            .nut-icon {
                margin-left: 20rpx;
            }
        }

        .nut-textarea {
            background: #F6F6F6;
            padding: 20rpx 0 !important;
            border-radius: 10rpx;
            min-height: 600rpx;
        }
    }

    .nut-button {
        width: 94%;
        margin: 0 auto 20rpx;
    }
}
</style>